<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui">

<ui:component>
    <style type="text/css">
        .link {
            font: 10px;
            text-align: left;
        }

        .remeberMe {
            font: 24px italic;
            text-align: left;
        }

        .leftWord {
            font: 10px;
            text-allign: left;
        }

        .rightWord {
            font: 10;
            text-allign: right;
        }
    </style>


    <rich:panel bodyClass="rich-laguna-panel-no-header">
        <h:form>
            <h:panelGrid columns="2">

                <h:outputLabel value=""></h:outputLabel>
                <h:panelGroup style="text-align:left;font:16 italic;" layout="block">
                    <h:outputLabel style="text-align:left;" value="YouConnect"/>
                </h:panelGroup>


                <h:panelGroup style="text-align:right" layout="block">
                    <h:selectBooleanCheckbox id="rememberCheckBox" style="text-align:right"
                                             value="#{loginBean.remeberMe}"/>
                </h:panelGroup>
                <h:panelGroup style="text-align:left;font:10;" layout="block">
                    <h:outputLabel for="#{rich:clientId('rememberCheckBox')}" style="text-align:left"
                                   value="#{resources.remeberMeLabel} ">
                        <a4j:commandLink value="[#{resources.moreLabel}]">
                            <rich:toolTip style="widht:250px;" followMouse="true"  direction="top-left" showDelay="500" styleClass="tooltip">
                                <a4j:outputPanel layout="block" style="widht:250px; word-wrap:normal">
                                    <strong>#{resources.keepMeLoginLabel}</strong>
                                    <br/>
                                    #{resources.keepMeLoginDetailedText}
                                </a4j:outputPanel>
                            </rich:toolTip>
                        </a4j:commandLink>
                    </h:outputLabel>
                </h:panelGroup>

                <h:panelGroup style="text-align:right;font:10;;" layout="block">
                    <h:outputLabel value="#{resources.emailLabel}"/>
                </h:panelGroup>
                <!--value="#{welcome.autentificate.mail}"-->
                <h:inputText value="#{credentials.username}" />

                <h:panelGroup style="text-align:right;font:10; " layout="block">
                    <h:outputLabel value="#{resources.passwordLabel}"/>
                </h:panelGroup>
                <!--value="#{welcome.autentificate.password}" -->
                <h:inputSecret value="#{credentials.password}" redisplay="true"/>

                <h:column rendered="#{not empty welcome.autentificate.mail}"/>
                <h:outputText value="Username #{welcome.autentificate.mail} or password not valid!"
                              style="color:red;"
                              rendered="#{not empty welcome.autentificate.mail}"
                        />


                <h:outputLabel value=""/>
                <h:panelGroup style="text-align:left; font:10;" layout="block">
                    <!--action="#{welcome.login}"-->
                    <h:commandButton style="text-align:left" value="#{resources.loginLabel}" action="#{identity.login}" />
                </h:panelGroup>


                <h:outputLabel value=""/>
                <h:panelGroup style="text-align:left; font:10;" layout="block">
                    <a4j:commandLink id="forgotPasswordButton"
                                     value="#{resources.forgotPasswordLabel}"
                                     reRender="forgotPasswordPanel"
                                     oncomplete="Richfaces.showModalPanel('forgotPasswordPanel');"
                                     limitToList="true"/>

                </h:panelGroup>


            </h:panelGrid>
        </h:form>
    </rich:panel>
    <core:forgotPasswordPanel id="forgotPasswordPanel"/>

</ui:component>


</html>
